<template>
  <list-condition-template
    ref="table"
    :rows="rows"
    :defaultSort="{ prop: 'updateTime', order: 'descending' }"
    :total="total"
    @page-info-change="handlePageInfoChange"
    :search-data="listQuery"
    :batch-column="false"
  >
    <template slot="condition">
      <el-form-item prop="keyword">
        <el-input
          placeholder="商品名"
          v-model="listQuery.keyword"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="goodsStatus">
        <el-select
          v-model="listQuery.goodsStatus"
          value-key="key"
          clearable
          placeholder="支付方式"
        >
          <el-option
            v-for="(item, key) in $CONST.GOODS_STATUS"
            :key="key"
            :label="item.title"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="goodsType">
        <el-select
          v-model="listQuery.goodsType"
          value-key="name"
          clearable
          placeholder="类型"
        >
          <el-option
            v-for="(item, key) in $CONST.GOODS_TYPE"
            :key="key"
            :label="item.title"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--
      <el-form-item prop="dateArray">
        <el-date-picker v-model="listQuery.dateArray" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="center" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item> -->
    </template>

    <template slot="normalOperation">
      <el-form-item>
        <el-button
          class="filter-item"
          @click="handleCreate"
          type="success"
          icon="el-icon-plus"
          v-waves
        >新增</el-button>
      </el-form-item>
    </template>

    <template slot="columns">
      <el-table-column
        label="商品ID"
        align="center"
        property="id"
        fixed
      ></el-table-column>
      <el-table-column
        label="商品名"
        min-width="160"
        align="center"
        property="name"
        fixed
      ></el-table-column>
      <el-table-column
        label="图片"
        min-width="130"
        align="center"
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.thumb"
            style="width: 100px; height: 100px"
            fit="contain"
            :src="scope.row.thumb"
            lazy
          ></el-image>
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column
        label="一般单价（元）"
        align="center"
        property="price"
      ></el-table-column>
      <el-table-column
        label="商品类型"
        min-width="100"
        align="center"
        property="goodsType"
      >
        <template slot-scope="scope">
          <el-tag>{{
            scope.row.goodsType && scope.row.goodsType.desc
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="销量"
        sortable="custom"
        align="center"
        property="salesVolume"
      ></el-table-column>
      <el-table-column
        label="销售状态"
        min-width="100"
        align="center"
        property="goodsStatus"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.goodsStatus.name === $CONST.GOODS_STATUS.OFF_SHELF.name?'danger':'success'">{{
            scope.row.goodsStatus && scope.row.goodsStatus.desc
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="修改时间"
        sortable="custom"
        min-width="150"
        align="center"
        property="updateTime"
      ></el-table-column>
      <el-table-column
        align="center"
        label="详情"
        class-name="fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="showDetail(scope.row)"
            v-waves
          >查看</el-button>
        </template>
      </el-table-column>
    </template>
  </list-condition-template>
</template>

<script>
import goodsAPI from '@/api/goods'
import waves from '@/directive/waves' // 水波纹指令
import ListConditionTemplate from '@/components/templates/listConditionTemplate'

export default {
  directives: {
    waves
  },
  components: {
    ListConditionTemplate
  },
  data () {
    return {
      rows: [],
      total: 0,
      listQuery: {}
    }
  },
  methods: {
    /**
     * 加载数据
     */
    getList (pageInfo) {
      goodsAPI
        .getPaged({ condition: this.listQuery, pageInfo })
        .then((response) => {
          console.log('res', response)

          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    handleFilter () {
      this.$refs.table.changeCondition()
    },
    /**
     * 分页信息变动事件处理
     * @param  {Object} pageInfo 分页信息
     */
    handlePageInfoChange (pageInfo) {
      this.getList(pageInfo)
    },
    /**
     * 查看详情点击处理
     * @param {*} row 参数
     */
    showDetail (row) {
      this.$router.pushTo(this.$router.routesConfig.goodsInfo, row.id)
    },
    /**
     * 新增
     */
    handleCreate () {
      this.$router.pushTo(this.$router.routesConfig.goodsInfo)
    }
  }
}
</script>
